<template>
  <div class="main">
      <div>
          <!-- 二级路由 -->
          <router-view></router-view>
      </div>
          <!-- 页面底部导航栏模块 -->
        <van-tabbar v-model="activeName" active-color="#00adb5" inactive-color="#646566" route>
            <van-tabbar-item 
                v-for="(item,index) in tabbarData"
                :key="index"
               
                :name="item.name"
                replace
                :to="item.path"
            >   
                <span>{{item.title}}</span>
                <template #icon="props">
                    <img :src="props.active ? item.activeImg : item.inactiveImg " />
                </template>
            </van-tabbar-item>
        </van-tabbar>
      </div>
</template>

<script>
export default {
    name:'Main',
    data(){
        return{
            //激活标签名称
            activeName:"Home",
            tabbarData:[
                {
                    title:"首页",
                    name:"Home",
                    path:"/main/home",
                    activeImg:require("../assets/images/home_active.png"),
                    inactiveImg:require("../assets/images/home.png"),
                },
                {
                    title:"菜单",
                    icon:"search",
                    name:"Menu",
                    path:"/main/menu",
                    activeImg:require("../assets/images/menu_active.png"),
                    inactiveImg:require("../assets/images/menu.png"),
                },
                {
                    title:"购物袋",
                    icon:"friends",
                    name:"Shopbag",
                    path:"/main/shopbag",
                    activeImg:require("../assets/images/shopbag_active.png"),
                    inactiveImg:require("../assets/images/shopbag.png"),
                },
                {
                    title:"我的",
                    icon:"setting",
                    name:"My",
                    path:"/main/my",
                    activeImg:require("../assets/images/my_active.png"),
                    inactiveImg:require("../assets/images/my.png"),
                },
            ]
        }
    }
};
</script>

<style>

</style>